<template>
    <el-dialog :visible.sync="dialogVisible" title="岗位详情" width="600px" top="10px"
    :before-close="handleClose"
        class="position-detail-dialog">
        <div class="position-content">
            <!-- 岗位基本信息 -->
            <div class="position-header">
                <div class="position-title">
                    <h3>{{ position.positionName || '未命名岗位' }}</h3>
                    <span class="position-id">ID: {{ position.positionId || '-' }}</span>
                </div>
                <div class="position-salary">
                    <span v-if="position.lowestSalaryMonth !== undefined && position.highestSalaryMonth !== undefined">
                        {{ position.lowestSalaryMonth }}-{{ position.highestSalaryMonth }} 元/月
                    </span>
                    <span v-else>{{ position.salary || '-' }}</span>
                </div>
            </div>

            <!-- 岗位信息卡片 -->
            <div class="position-info-card">
                <div class="info-row">
                    <span class="info-label">岗位类别:</span>
                    <span class="info-value">{{ position.positionType || '-' }}</span>
                </div>

                <div class="info-row">
                    <span class="info-label">开始时间:</span>
                    <span class="info-value">{{ formatDate(position.startAt) || '-' }}</span>
                </div>

                <div class="info-row">
                    <span class="info-label">结束时间:</span>
                    <span class="info-value">{{ formatDate(position.endAt) || '-' }}</span>
                </div>
            </div>

            <!-- 发布人信息 -->
            <div class="publisher-info">
                <h4 class="section-title">发布人信息</h4>

                <div class="publisher-card">
                    <div class="publisher-avatar">
                        <img :src="position.mcrossComUserMessageResp?.avatar || defaultAvatar" alt="发布人头像">
                    </div>

                    <div class="publisher-details">
                        <div class="publisher-name">{{ position.mcrossComUserMessageResp?.name || '-' }}</div>
                        <div class="publisher-type">{{ getPublisherTypeText(position.mcrossComUserMessageResp?.type) ||
                            '-' }}</div>
                        <div class="publisher-contact">
                            <i class="el-icon-phone"></i> {{ position.mcrossComUserMessageResp?.phone || '-' }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose()">关闭</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
export default {
    name: "PositionDetailDialog",
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        position: {
            type: Object,
            default: () => ({})
        },
        defaultAvatar: {
            type: String,
            default: 'https://picsum.photos/200/200?random=1'
        }
    },
    data() {
        return {
            dialogVisible: this.visible // 初始化本地状态
        };
    },

    watch: {
        position(newPosition) {
            console.log('PositionDialog接收到的position更新:', newPosition);
        },
        visible(newValue) {
            this.dialogVisible = newValue;
        },
    },
    methods: {
        // 格式化日期
        formatDate(dateString) {
            if (!dateString) return '未提供';

            try {
                const date = new Date(dateString);
                if (isNaN(date.getTime())) {
                    return '日期格式错误';
                }
                return date.toLocaleDateString('zh-CN', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric',
                    hour: '2-digit',
                    minute: '2-digit'
                });
            } catch (error) {
                console.error('日期解析失败:', error);
                return '日期解析失败';
            }
        },

        // 获取发布人类型文本
        getPublisherTypeText(type) {
            const typeMap = {
                'BOSS': '老板',
                'MANAGEMENT': '管理层',
                'RECRUITER': '招聘人员'
            };
            return typeMap[type] || type;
        },

        // 关闭对话框
        handleClose() {
            this.dialogVisible = false;
            this.$emit('update:visible', false);
        }
    }
};
</script>


<style scoped>
.position-detail-dialog .el-dialog {
  display: flex;
  flex-direction: column;
  max-height: 90vh; /* 限制最大高度 */
  margin: 0 auto; /* 水平居中 */
}


.position-detail-dialog .el-dialog__header {
    background-color: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
    padding: 16px 24px;
}

.position-detail-dialog .el-dialog__title {
    color: #304156;
    font-weight: 600;
    font-size: 18px;
}

.position-content {
    padding: 24px;
}

.position-header {
    margin-bottom: 24px;
}

.position-title {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.position-title h3 {
    font-size: 20px;
    font-weight: 600;
    color: #303133;
    margin-right: 12px;
}

.position-id {
    font-size: 14px;
    color: #909399;
}

.position-salary {
    font-size: 18px;
    font-weight: 600;
    color: #f56c6c;
}

.position-info-card {
    background-color: #fafafa;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 24px;
}

.info-row {
    display: flex;
    margin-bottom: 12px;
}

.info-label {
    width: 100px;
    color: #909399;
    font-weight: 500;
}

.info-value {
    color: #303133;
}

.section-title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ebeef5;
}

.publisher-card {
    display: flex;
    align-items: center;
    background-color: white;
    border: 1px solid #ebeef5;
    border-radius: 6px;
    padding: 16px;
}

.publisher-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
}

.publisher-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.publisher-details {
    flex: 1;
}

.publisher-name {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    margin-bottom: 4px;
}

.publisher-type {
    font-size: 14px;
    color: #606266;
    margin-bottom: 8px;
}

.publisher-contact {
    font-size: 14px;
    color: #909399;
}

.dialog-footer {
    display: flex;
    justify-content: center;
    padding: 16px 24px;
    border-top: 1px solid #ebeef5;
}
</style>